<template>
  <view class="vip-page">
    <!-- bannner -->
     <view class="banner">
          <!-- <image
            src="../static/images/vip-banner.png"
            mode="scaleToFill"
            lazy-load="false">
          </image> -->
     </view>
     <!-- 简介 -->
     <view class="vip-intro">
         <view class="title">智能金融服务平台</view>
          <view class="content">平台以“帮助企业和个人解决资金难题”微使命,在贷款链接、专业服务于咨询上，为客户构建了全方位、全流程、全生命周期的高品质金融服务体系实现个人和企业专属顾问服务的完美在线融资闭环体验。</view>
     </view>
     <!-- 平台优势 -->
     <view class="wj-advantage">
         <view class="title">智能金融服务平台</view>
         <view class="content">
              <view class="item" v-for="(item,index) in modules" :key="index">
                  <view>
                       <image
                         :src="item.icon"
                         mode="scaleToFill"
                         lazy-load="false">
                       </image>
                  </view>
                  <view class="text">{{item.text}}</view>
              </view>
         </view>
     </view>
     <!-- 成为企业VIP -->
     <view class="enterprise">
        <view class="title-top">
           <image
             src="../static/images/vip-top.png"
             mode="scaleToFill"
             lazy-load="false">
           </image>
          <view class="title">成为企业VIP</view>
        </view>
        <view class="content">
             <view class="item" v-for="(item,index) in enterprise" :key="index">
                <view>
                      <image
                        :src="item.icon"
                        mode="scaleToFill"
                        lazy-load="false">
                      </image>
                </view>
                <view class="text m-b-75">{{item.text}}</view>
              </view>
        </view>
        <!-- <view class="vip-border-title">
           专属扶持计划·赋能企业VIP
        </view> -->
        <view class="module">
          <image
            src="../static/images/vip-enter.png"
            mode="scaleToFill"
            lazy-load="false">
          </image>
        </view>
     </view>
     <!-- 成为个人VIP -->
     <view class="enterprise ">
        <view class="title-top">
           <image
             src="../static/images/vip-top.png"
             mode="scaleToFill"
             lazy-load="false">
           </image>
          <view class="title">成为个人VIP</view>
        </view>
        <view class="content">
             <view class="item" v-for="(item,index) in personal" :key="index">
                <view>
                      <image
                        :src="item.icon"
                        mode="scaleToFill"
                        lazy-load="false">
                      </image>
                </view>
                <view class="text m-b-20">{{item.text}}</view>
                <view class="describe m-b-70">{{item.describe}}</view>
              </view>
        </view>
        <!-- <view class="vip-border-title">
           专属扶持计划·赋能个人VIP
        </view> -->
        <view class="module" style="width:623upx;height:717upx;">
          <image
            style="width:623upx;height:717upx;"
            src="../static/images/vip-enter1.png"
            mode="scaleToFill"
            lazy-load="false">
          </image>
        </view>
     </view>
     <view class="vip-bottom">
         <view class="item">如果您有兴趣加入我们的VIP</view>
         <view class="item">请点击“我的-商务合作”</view>
         <view class="item">进行申请</view>
     </view>
  </view>
</template>
<script>
import Vue from "vue"
import InterServer from "@/common/config/server"
import {localStorageSyncServer} from "@/common/js/common"
let intervaler = null;
export default {
  data(){
    return{
       modules:[{
         icon:"../static/images/iocn_vip_module1.png",
         text:"资金引储"
       },{
         icon:"../static/images/iocn_vip_module2.png",
         text:"资金引储"
       },{
         icon:"../static/images/iocn_vip_module3.png",
         text:"完善体系"
       },{
         icon:"../static/images/iocn_vip_module4.png",
         text:"资金引储"
       }],
      enterprise:[{
         icon:"../static/images/icon_vip_enter1.png",
         text:"低投入"
       },{
         icon:"../static/images/icon_vip_enter2.png",
         text:"高收入"
       },{
         icon:"../static/images/icon_vip_enter3.png",
         text:"长回报"
       }],
       personal:[{
         icon:"../static/images/icon_vip_enter4.png",
         text:"增加收入",
         describe:"大量平台线上线下收益",
       },{
         icon:"../static/images/icon_vip_enter5.png",
         text:"涨知识",
          describe:"海量金融贷款知识",
       },{
         icon:"../static/images/icon_vip_enter6.png",
         text:"拓人脉",
        describe:"更多人生可能",
       }],
    }
  },
  onHide(){
     
  },
  onshow(){
    // #ifdef H5
        document.title=`平台顾问协议`
    // #endif
  },
  methods:{
  
  }
};
</script>
<style lang="less" scoped>
.vip-page {
  background: #f1f9fe;
  height: 100%;
  .banner{
    image{
      width: 100%;
      height: 320upx;
    }
  }
  .title{
    color: #4683f0;
    font-size: 40upx;
    font-weight: bolder;
    text-align: center;
  }
  // Vip简介
  .vip-intro{
    background: #ffffff;
    padding: 0 40upx;
    .title{
      padding-top: 70upx;
    }
    .content{
      line-height: 40upx;
      font-size: 28upx;
      color: #000000;
      font-weight: bold;
      padding: 45upx 0 30upx;
    }
  }
  // 平台优势
  .wj-advantage{
    background: #f1f9fe;
    .title{
      background: #ffffff;
      padding-bottom: 10upx;
    }
    .content{
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      justify-content: center;
      align-content: center;
      .item{
        width: 50%;
        image{
          width: 149upx;
          height: 125upx;
        }
        .text{
          font-size: 28upx;
          color: #385ffb;
          margin-top: 20upx;
          margin-bottom: 70upx;
          font-weight: bold;
        }
        &:first-child{
          margin-top: 40upx;
        }
        &:nth-child(2){
          margin-top: 40upx;
        }
      }
    }
  }
  //成为企业VIP
  .enterprise{
    width: 100%;
    .title-top{
       margin: 0 auto;
       width:690upx;
       height: 59upx;
       position: relative;
       .title{
         width: 260upx;
         height: 63upx;
         line-height: 63upx;
         color: #ffffff;
         font-size: 36upx;
         font-weight: bolder;
         position: absolute;
         left: 50%;
         top: 0;
         margin-left: -130upx;
       }
      image{
        width:690upx;
        height: 59upx;
        margin: 0 auto;
      }
    }
    .content{
      display: flex;
      justify-content: space-between;
      background: #ffffff;
      padding: 75upx 0 0;
      margin: 0 30upx;
      overflow: hidden;
      .item{
        width: 31%;
        text-align: center;
        margin: 0 auto;
        text-align: center;
        image{
          width: 124upx;
          height: 113upx;
        }
        .text{
          margin-top: 30upx;
          // margin-bottom: 75upx;
          font-size: 36upx;
          color: #333333;
          font-weight: bolder;
        }
        .describe{
          font-size: 20upx;
          color: #333333;
          text-align: center;
        }
        &:first-child{
          width: 38%;
        }
      }
    }
    .vip-border-title{
       width: 503upx;
       height: 68upx;
       line-height: 68upx;
       background: url("../static/images/vip-boder.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
       margin: 75upx auto 90upx;
       font-size: 40upx;
       color: #4683f0;
       text-align: center;
       font-weight: bolder;
    }
    .module{
        margin:75upx auto;
        width: 632upx;
        height: 921upx;
      image{
        width: 632upx;
        height: 921upx;
      }
    }
  }
  .vip-bottom{
    height: 240upx;
    color: #ffffff;
    text-align: center;
    font-size: 30upx;
    font-weight: bold;
    background: #5695ff;
    background: linear-gradient(90deg,#5695ff,#246bf6);
    background: -webkit-linear-gradient(90deg,#5695ff,#246bf6);
    background: -o-linear-gradient(90deg,#5695ff,#246bf6);
    background: -moz-linear-gradient(90deg,#5695ff,#246bf6);
    vertical-align: center;
    overflow: hidden;
    .item{
      line-height: 30upx;
      margin-bottom: 15upx;
      &:first-child{
        margin-top: 50upx;
      }
    }
  }
}

</style>
